<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0 user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"
		/>
		<title>首页</title>
		<link
			rel="stylesheet"
			href="https://unpkg.com/swiper/swiper-bundle.css"
		/>
		<link
			rel="stylesheet"
			href="https://at.alicdn.com/t/font_2762847_iigj3umqtq.css"
		/>
		<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
	</head>
	<body>
		<div class="showUtdm">
			<div class="son">
				<header class="baner">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide bg1">
								<img src="./img/course-img01.jpg" alt="" />
							</div>
							<div class="swiper-slide bg2">
								<img src="./img/course-img02.png" alt="" />
							</div>
							<div class="swiper-slide bg3">
								<img src="./img/course-img03.jpg" alt="" />
							</div>
						</div>
						<!-- 如果需要分页器 -->
						<div class="swiper-pagination"></div>
					</div>
				</header>
				<main class="main">
					<ul>
						<li class="showTop">
							<div class="Topleft">
                                <p>今日排名</p>
                                <span></span>
                            </div>
							<div class="Topright">
								<div class="TRtop">累积打卡<span></span>天</div>
								<div class="TRbottom">
									<button></button>
								</div>
							</div>
						</li>
						<li class="showBottom">
							<div class="Bottomleft" id="Functionaldata">
                                <p>运动数据</p>
                            </div>
							<div class="Bottomright">
                                <p>累积运动徽章</p>
                                <span class="Brispan"><span class="shownum"></span>枚</span>
                            </div>
						</li>
						<li id="listone">
                            <p>课程训练</p>
                        </li>
						<li id="listtwo">
                            <p>户外跑步</p>
                        </li>
					</ul>
				</main>
			</div>
		</div>
	</body>
</html>
